
<script setup lang="ts">
import { useEcharts } from '@/hooks/common/echarts';
import * as echarts from 'echarts'; //引入echarts
import jiangxi from "./jiangxi.json"; //引入四川省geoJson数据(也可通过服务器接口获取)
echarts.registerMap('jiangxi', jiangxi as any); //注册绘制四川省地图

var geoCoordMap = {
  '南昌': [115.89, 28.48],
  '景德镇': [117.28, 29.09],
  '萍乡': [113.93, 27.41],
  '九江': [115.97, 29.51],
  '新余': [114.81, 27.72],
  '鹰潭': [117.12, 28.10],
  '赣州': [115.04, 25.67],
  '吉安': [115.05, 26.88],
  '宜春': [114.41, 28.03],
  '抚州': [116.45, 27.79],
  '上饶': [117.92, 28.22]
};
var levelColorMap = {
  '1': 'rgba(241, 109, 115, .8)',
  '2': 'rgba(255, 235, 59, .7)',
  '3': 'rgba(147, 235, 248, 1)'
};
var handleEvents = {
  initSeriesData: function (data) {
    var temp = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        temp.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value, data[i].level)
        });
      }
    };
    return temp;
  },
};

const { domRef, updateOptions } = useEcharts(() => (
  {
    backgroundColor: '#154e90',
    geo: {
      map: 'jiangxi',
      // roam: true,
      zoom: 1,
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(147, 235, 248, 1)',
          borderWidth: 1,
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [{
              offset: 0,
              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          },
          shadowColor: 'rgba(128, 217, 248, 1)',
          // shadowColor: 'rgba(255, 255, 255, 1)',
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      },
    },
    series: [{
      type: 'effectScatter',
      coordinateSystem: 'geo',
      // symbol: 'diamond',s
      showEffectOn: 'render',
      rippleEffect: {
        period: 15,
        scale: 6,
        brushType: 'fill'
      },
      hoverAnimation: true,
      itemStyle: {
        normal: {
          color: function (params) {
            return levelColorMap[params.value[3]];
          },
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      data: handleEvents.initSeriesData([{
        name: '南昌',
        value: 10,
        level: 1
      }, {
        name: '景德镇',
        value: 12,
        level: 2
      }, {
        name: '萍乡',
        value: 11,
        level: 3
      }, {
        name: '赣州',
        value: 16,
        level: 2
      }, {
        name: '吉安',
        value: 12,
        level: 1
      }])
    }]
  }
));

// console.log(appStore.locale);
async function mockData() {
  await new Promise(resolve => {
    setTimeout(resolve, 1000);
  });
  // console.log('mock');
  updateOptions(opts => {
    return opts;
  });
}


async function init() {
  mockData();
}

// init
init();
</script>

<template>
  <div ref="domRef" class="h-360px overflow-hidden bg-[#154e90]"></div>
</template>

<style scoped></style>
